{% extends "admin/layout.html" %}

{% block title %}添加门禁设备 - {{ system_config.site_name|default('项目管理系统') }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 页面标题和操作区域 -->
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 gap-3">
        <div>
            <h1 class="h3 mb-0 text-gray-800 fw-bold">
                <i class="fas fa-plus-circle me-2 text-success"></i>添加门禁设备
            </h1>
            <p class="text-muted mb-0">配置新的门禁设备并将其添加到系统</p>
        </div>
        <div class="d-flex gap-2">
            <button type="submit" form="deviceForm" class="btn btn-success btn-sm">
                <i class="fas fa-save me-1"></i>保存设备
            </button>
            <a href="{{ url_for('zktime.device_list') }}" class="btn btn-outline-secondary btn-sm">
                <i class="fas fa-times me-1"></i>取消
            </a>
        </div>
    </div>

    <!-- 设备信息卡片 -->
    <div class="card shadow-sm border-0">
        <div class="card-header py-2 bg-white d-flex align-items-center">
            <i class="fas fa-info-circle me-2 text-primary"></i>
            <h6 class="m-0 font-weight-bold text-primary mb-0">设备基本信息</h6>
        </div>
        <div class="card-body p-4">
            <form id="deviceForm" method="POST" action="{{ url_for('zktime.device_add') }}">
                <div class="row g-3">
                    <!-- 设备名称 -->
                    <div class="col-md-6">
                        <label for="name" class="form-label required">
                            <i class="fas fa-tag me-1 text-muted"></i>设备名称
                        </label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-server"></i></span>
                            <input type="text" class="form-control" id="name" name="name"
                                   placeholder="例如：主入口门禁" required>
                        </div>
                        <div class="form-text">为设备指定一个易识别的名称</div>
                    </div>

                    <!-- IP地址 -->
                    <div class="col-md-6">
                        <label for="ip_address" class="form-label required">
                            <i class="fas fa-network-wired me-1 text-muted"></i>IP地址
                        </label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-laptop-code"></i></span>
                            <input type="text" class="form-control" id="ip_address" name="ip_address"
                                   placeholder="例如：192.168.1.100" required>
                        </div>
                        <div class="form-text">设备的IP地址或主机名</div>
                    </div>

                    <!-- 端口 -->
                    <div class="col-md-4">
                        <label for="port" class="form-label">
                            <i class="fas fa-plug me-1 text-muted"></i>端口
                        </label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-exchange-alt"></i></span>
                            <input type="number" class="form-control" id="port" name="port"
                                   value="4370" min="1" max="65535">
                        </div>
                        <div class="form-text">默认端口：4370</div>
                    </div>

                    <!-- 协议 -->
                    <div class="col-md-4">
                        <label for="protocol" class="form-label">
                            <i class="fas fa-link me-1 text-muted"></i>协议
                        </label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-project-diagram"></i></span>
                            <select class="form-select" id="protocol" name="protocol">
                                <option value="TCP" selected>TCP</option>
                                <option value="UDP">UDP</option>
                            </select>
                        </div>
                    </div>

                    <!-- 设备密码 -->
                    <div class="col-md-4">
                        <label for="password" class="form-label">
                            <i class="fas fa-lock me-1 text-muted"></i>设备密码
                        </label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-key"></i></span>
                            <input type="password" class="form-control" id="password" name="password">
                        </div>
                        <div class="form-text">设备访问密码（可选）</div>
                    </div>

                    <!-- 设备描述 -->
                    <div class="col-12">
                        <label for="description" class="form-label">
                            <i class="fas fa-align-left me-1 text-muted"></i>设备描述
                        </label>
                        <textarea class="form-control" id="description" name="description"
                                  rows="3" placeholder="设备位置、型号或其他相关信息"></textarea>
                    </div>
                </div>
                    <!-- 设备预览 -->
                    <div class="row mt-4">
                        <div class="col-12">
                            <h6 class="text-primary mb-3">
                                <i class="fas fa-eye me-2"></i>设备信息预览
                            </h6>
                            <div class="card bg-light border">
                                <div class="card-body">
                                    <div class="d-flex flex-wrap gap-3">
                                        <div class="device-preview-item">
                                            <span class="text-muted">名称：</span>
                                            <span id="preview-name">{{ device.name }}</span>
                                        </div>
                                        <div class="device-preview-item">
                                            <span class="text-muted">IP：</span>
                                            <span id="preview-ip">{{ device.ip_address }}</span>
                                        </div>
                                        <div class="device-preview-item">
                                            <span class="text-muted">端口：</span>
                                            <span id="preview-port">{{ device.port or 4370 }}</span>
                                        </div>
                                        <div class="device-preview-item">
                                            <span class="text-muted">协议：</span>
                                            <span id="preview-protocol">{{ device.protocol }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

            </form>
        </div>

        <!-- 操作按钮 -->
        <div class="card-footer bg-white d-flex justify-content-end pt-0">
            <button type="submit" form="deviceForm" class="btn btn-success me-2">
                <i class="fas fa-save me-1"></i>保存设备
            </button>
            <a href="{{ url_for('zktime.device_list') }}" class="btn btn-outline-secondary">
                <i class="fas fa-times me-1"></i>取消
            </a>
        </div>
    </div>

    <!-- 帮助信息 -->
    <div class="card shadow-sm border-0 mt-4">
        <div class="card-header py-2 bg-white">
            <h6 class="m-0 font-weight-bold text-primary mb-0">
                <i class="fas fa-question-circle me-2 text-info"></i>设备添加说明
            </h6>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-4 mb-3">
                    <div class="alert alert-info d-flex align-items-center">
                        <i class="fas fa-info-circle fa-2x me-3"></i>
                        <div>
                            <strong>连接测试</strong>
                            <p class="mb-0">保存后系统将自动测试设备连接，请确保设备在线</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="alert alert-warning d-flex align-items-center">
                        <i class="fas fa-exclamation-triangle fa-2x me-3"></i>
                        <div>
                            <strong>安全设置</strong>
                            <p class="mb-0">建议为设备设置强密码并定期更换</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="alert alert-success d-flex align-items-center">
                        <i class="fas fa-check-circle fa-2x me-3"></i>
                        <div>
                            <strong>最佳实践</strong>
                            <p class="mb-0">为不同区域设备使用命名约定，如"大厅-主入口"</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>




<script>
document.addEventListener('DOMContentLoaded', function() {
    // 实时更新设备预览
    const nameInput = document.getElementById('name');
    const ipInput = document.getElementById('ip_address');
    const portInput = document.getElementById('port');
    const protocolInput = document.getElementById('protocol');

    const previewName = document.getElementById('preview-name');
    const previewIp = document.getElementById('preview-ip');
    const previewPort = document.getElementById('preview-port');
    const previewProtocol = document.getElementById('preview-protocol');

    function updatePreview() {
        previewName.textContent = nameInput.value || '-';
        previewIp.textContent = ipInput.value || '-';
        previewPort.textContent = portInput.value || '-';
        previewProtocol.textContent = protocolInput.value || '-';
    }

    // 添加事件监听
    nameInput.addEventListener('input', updatePreview);
    ipInput.addEventListener('input', updatePreview);
    portInput.addEventListener('input', updatePreview);
    protocolInput.addEventListener('change', updatePreview);

    // 初始化预览
    updatePreview();

    // 表单提交处理
    document.getElementById('deviceForm').addEventListener('submit', function(e) {
        // 这里可以添加表单验证逻辑
        console.log('设备添加表单已提交');
    });
});
</script>

<style>
.required:after {
    content: " *";
    color: #dc3545;
}

.form-label {
    font-weight: 500;
    margin-bottom: 0.3rem;
}

.input-group-text {
    min-width: 40px;
    justify-content: center;
}

.form-text {
    font-size: 0.85rem;
    color: #6c757d;
}

.device-preview-item {
    background: #e9ecef;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    font-size: 0.9rem;
}

.alert {
    border-radius: 0.5rem;
}

.card-footer {
    border-top: 1px solid rgba(0,0,0,.05);
}
</style>
{% endblock %}